<template>
  <KiFormDialog
    :show.sync="row.show"
    title="详情"
    v-model="row.data"
    readonly
  >
    <template>
      <el-steps :active="activeOfStep" finish-status="wait" class="mb30">
        <el-step
        v-for="( item, index) in listOfStep"
        :title="item"
        :key="index"
        @click.native="activeOfStep = index"></el-step>
      </el-steps>
    </template>
    <template v-if="row.data.baseVO && activeOfStep == 0"> <!--基本信息-->
      <preview-table class="flex-1">
        <tr>
          <td>酒店ID</td>
          <td>{{ row.data.baseVO.hotelId }}</td>
          <td>酒店名称</td>
          <td>{{ row.data.baseVO.hotelChnName }}</td>
        </tr>
        <tr>
          <td>酒店地址</td>
          <td>{{ row.data.baseVO.chnAddress }}</td>
          <td>酒店星级</td>
          <td>{{ row.data.baseVO.hotelStarName }}</td>
        </tr>
        <tr>
          <td>酒店品牌ID</td>
          <td>{{ row.data.baseVO.plateId }}</td>
          <td>酒店品牌名称</td>
          <td>{{ row.data.baseVO.plateName }}</td>
        </tr>
        <tr>
          <td>酒店电话</td>
          <td>{{ row.data.baseVO.telephone }}</td>
          <td>房间总数</td>
          <td>{{ row.data.baseVO.roomQuantity }}</td>
        </tr>
        <tr>
          <td>是否可预订</td>
          <td>{{ row.data.baseVO.bookableName }}</td>
          <td>酒店评分</td>
          <td>{{ row.data.baseVO.guestOverallRating }}</td>
        </tr>
        <tr>
          <td>开业时间</td>
          <td>{{ row.data.baseVO.praciceDate }}</td>
          <td>酒店类型</td>
          <td>{{ row.data.baseVO.hotelCategoryName }}</td>
        </tr>
        <tr>
          <td>酒店主题标签</td>
          <td>{{ row.data.baseVO.hotelFeaturesName }}</td>
        </tr>
      </preview-table>
    </template>
    <template v-if="row.data.lcationVO && activeOfStep == 1"> <!--位置信息-->
      <h3 class="subtitle"><span>酒店地理信息</span></h3>
      <preview-table class="flex-1">
        <tr>
          <td>城市</td>
          <td>{{ row.data.lcationVO.cityName }}</td>
          <td>城市ID</td>
          <td>{{ row.data.lcationVO.cityCode }}</td>
        </tr>
        <tr>
          <td>行政区</td>
          <td>{{ row.data.lcationVO.countyName }}</td>
          <td>行政区ID</td>
          <td>{{ row.data.lcationVO.countyCode }}</td>
        </tr>
        <tr>
          <td>商圈</td>
          <td>{{ row.data.lcationVO.businessName }}</td>
          <td>酒店经度</td>
          <td>{{ row.data.lcationVO.longitude }}</td>
        </tr>
        <tr>
          <td>酒店纬度</td>
          <td>{{ row.data.lcationVO.latitude }}</td>
        </tr>
      </preview-table>
      <h3 class="subtitle"><span>交通信息</span></h3>
      <el-table
        stripe
        v-loading="row.loading"
        :data="row.data.lcationVO.hotelAroundMarks"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="经度">
          <template slot-scope="{row}" v-if="row.coordinate">
            {{ row.coordinate.lng }}
          </template>
        </el-table-column>
        <el-table-column label="纬度">
          <template slot-scope="{row}" v-if="row.coordinate">
            {{ row.coordinate.lat }}
          </template>
        </el-table-column>
        <el-table-column label="地标名称" prop="name"/>
        <el-table-column label="地标类型" prop="typeName"/>
        <el-table-column label="酒店与地标距离">
          <template slot-scope="{row}">
            {{ `${Number(row.distance).toFixed(2)} 公里`}}
          </template>
        </el-table-column>
        <el-table-column label="到达方式" prop="directions"/>
        <el-table-column label="交通类型" prop="transportationTypeName"/>
        <el-table-column label="花费时间">
          <template slot-scope="{row}">
            {{ `${row.timeTaken}分钟` }}
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="row.data.baseVO && activeOfStep == 2"> <!--图文详情-->
      <h3 class="subtitle"><span>酒店描述</span></h3>
      <div class="mb20" v-html="row.data.baseVO.hotelIntroduce" style="line-height:1.8;"/>
      <div class="table-operation">
        <h3 class="subtitle"><span>酒店图片</span></h3>
        <!-- <Pagination
          :total="graphicDetails.total"
          :currentPage.sync="graphicDetails.pageNo"
          @current-change="queryForPageImage(row.data.baseVO.hotelId)"
        /> -->
        <el-pagination
          :total="graphicDetails.total"
          :currentPage.sync="graphicDetails.pageNo"
          :pageSize.sync="graphicDetails.pageSize"
          @current-change="queryForPageImage(row.data.baseVO.hotelId)"
        />
      </div>

      <el-table
        stripe
        v-loading="row.loading"
        :data="graphicDetails.data"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="图片类型" prop="imageTypeName"/>
        <el-table-column label="图片标题" prop="caption"/>
        <el-table-column label="图片">
          <template v-if="row.picUrl" slot-scope="{row}">
            <PicViewer :value="row.picUrl" tableCell />
          </template>
        </el-table-column>

      </el-table>
    </template>
    <template v-if="row.data.baseVO && activeOfStep == 3"> <!--设施设备-->
      <h3 class="subtitle"><span>酒店设施</span></h3>
      <el-table
        stripe
        v-loading="row.loading"
        :data="row.data.baseVO.hotelFacilitys"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="名称" prop="name"/>
        <el-table-column label="类型" prop="typeName"/>
        <el-table-column label="状态" prop="statusName"/>
      </el-table>
    </template>
    <template v-if="row.data.baseVO && activeOfStep == 4"> <!--政策规划-->
      <h3 class="subtitle"><span>入离时间</span></h3>
      <div v-html="row.data.baseVO.hotelPolicys[0].text" class="mb20"></div>
      <h3 class="subtitle"><span>儿童及加床</span></h3>
      <preview-table class="flex-1">
      <table class="flex-1">
        <tr>
          <td>是否可携带儿童入住</td>
          <td>{{ childAndExtraBedPolicy.allowChildrenToStayV2 | fieldByFilters}}</td>
          <td>儿童是否可使用现有床位</td>
          <td>{{ childAndExtraBedPolicy.allowUseExistingBedV2 | fieldByFilters}}</td>
        </tr>
        <tr>
          <td>儿童入住年龄限制</td>
          <td>{{ childAndExtraBedPolicy.limitOfChildAge | fieldByFilters}}</td>
          <td>是否提供加床</td>
          <td>{{ childAndExtraBedPolicy.allowExtraBedV2 | fieldByFilters}}</td>
        </tr>
        <tr>
          <td>是否提供加婴儿床</td>
          <td>{{ childAndExtraBedPolicy.allowExtraCribV2 | fieldByFilters}}</td>
          <td>是否允许同时加床和婴儿床</td>
          <td>{{ childAndExtraBedPolicy.extraBedExtraCribRelation | fieldByFilters}}</td>
        </tr>
      </table>
      </preview-table>
    </template>
  </KiFormDialog>
</template>

<script>
import { mapGetters } from "vuex";
import previewTable from "@/components/preview-table";
export default {
  components: { previewTable },
  filters: {
    fieldByFilters(k) {
      const o = {
        true: '是',
        false: '否',
        'unknown': '未知',
        '-1': '没有限制',
        'default': '',
        'AND': '是',
        'OR': '否'
      }
      return o[k] || o['default']
    },
  },
  watch: {
    '$attrs.id': {
      handler: function(newID) {
        if (newID) {
          this.activeOfStep = 0
          this.graphicDetails = {
            data: [],
            total: 0,
            pageNo: 1,
            pageSize: 10
          }
          this.queryForDetail(newID)
          this.queryForPageImage(newID)
          this.row.loading = true
          this.row.show = true
        }
      },
      immediate: true
    },
    // 写在KiFormDialog的 :before-close="()=>{ $emit('clearHotelId') }"代码，
    // 在点击弹框下方默认关闭按钮时，不生效，所以放在这里监听
    'row.show': {
      handler (nv,ov) {
        if (!nv && ov) {
          this.$emit('clearHotelId')
        }
      },
      deep: true
    },
  },
  data () {
    return {
      activeOfStep: 0,
      loading: false,
      listOfStep: ['基本信息', '位置信息', '图文详情', '设施设备', '政策规划'],
      graphicDetails: {
        data: [],
        total: 0,
        pageNo: 1,
        pageSize: 10
      },
      row: {
        show: false,
        loading: false,
        data: {}
      },
      childAndExtraBedPolicy: {}
    }
  },
  methods: {
    queryForDetail(hotelId) {
      this.$POST('sot-admin-api/hotel/ctripHotel/queryForDetail', {
        id: hotelId,
      }).then(res => {
        this.row.data = res.data || []
        this.childAndExtraBedPolicy = {
          ...res.data.baseVO.normalizedPolicies.childAndExtraBedPolicy
        }
        this.row.loading = false
      })
    },
    queryForPageImage(hotelId) {
      const { pageNo, pageSize } = this.graphicDetails
      this.$POST('sot-admin-api/hotel/ctripHotel/queryForPageImage', {
        hotelId,
        pageSize: pageSize,
        pageNo: pageNo
      }).then(res => {
        const { records, total } = res.data
        this.graphicDetails.data = records || []
        this.graphicDetails.total = total || 0
      })
    },
  }
}
</script>

<style lang="scss" scoped>

</style>

